<!--
 
 * @Description: 工具组件
 [
  {
    key: "wyRuleNew",
    type: "button",
    //图样式
    class: "wy-rule-new",
    title: "新增",
    //无效？
    disabled: false,
    //下级分格线
    separator: false
  }
  ]
-->
<template>
  <div
    :ref="refToolbar"
    class="toolbar"
    :style="{ justifyContent: align, backgroundColor: bgColor, border: 'none' }"
  >
    <div
      :id="item.key"
      class="item"
      v-for="(item, idx) in visibleButtons"
      :key="idx"
    >
      <div
        v-if="item.type === 'button' && !item.isHide"
        class="command wy-icon-cust "
        :class="[item.class, { disable: item.disabled }, { open: item.isOpen }]"
        :style="{
          fontSize: `${size}px`,
          color: item.disabled ? '' : item.color
        }"
        :title="$srv.getI18nByPath(item.title)"
        :key="item.key"
        @click="handleClickLink(item, $event)"
      />
      <component
        v-if="item.type === 'comp' && !item.isHide"
        :is="item.compName"
        v-bind="item.props"
        :title="item.title"
        :disabled="item.disabled"
        v-on="$listeners"
      />
      <div class="separator" v-if="item.separator" />
    </div>
    <div id="more" v-if="hiddenButtons.length > 0">
      <Dropdown>
        <a href="javascript:void(0)">
          {{ $srv.getI18nByPath('更多') }}
          <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
          <DropdownItem v-for="(itm, index) of hiddenButtons" :key="index">
            <div
              v-if="itm.type === 'button' && !itm.isHide"
              class="command wy-icon-cust "
              :class="[
                itm.class,
                { disable: itm.disabled },
                { open: itm.isOpen }
              ]"
              :style="{
                fontSize: `${size}px`,
                color: itm.disabled ? '' : itm.color
              }"
              :title="$srv.getI18nByPath(itm.title)"
              :key="itm.key"
              @click="handleClickLink(itm, $event)"
            />
            <component
              v-if="itm.type === 'comp' && !itm.isHide"
              :is="itm.compName"
              v-bind="itm.props"
              :title="itm.title"
              :disabled="itm.disabled"
              v-on="$listeners"
            />
            <!-- <div class="separator" v-if="itm.separator" /> -->
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  </div>
</template>
<script lang="ts">
import { T_srv, Tsrv, ifs, ts, vue } from '@/services';
import { N_oSimpleToolbar } from './types';

@T_srv.comp
export default class oSimpleToolbar extends vue {
  @T_srv.prop({ type: Array, required: true }) list: Array<
    N_oSimpleToolbar.I_Conf
  >;

  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  // 对齐方式
  @T_srv.prop({
    required: false,
    type: String,
    default: 'left',
    validator: val => {
      return /^left|center|rigth$/.test(val);
    }
  })
  align: string;

  @T_srv.prop({
    required: false,
    type: Number,
    default: 16
  })
  size: number;

  // 背景颜色
  @T_srv.prop({
    required: false,
    type: String,
    default: null
  })
  bgColor: string;

  private G_compName: string = 'oSimpleToolbar';

  private GT_compBoxInfo: ifs.I_compBoxInfo;

  private GT_compBox: ifs.I_compBox;

  private G_compID: string;

  private G_minimap: any = null;

  public refToolbar: string = Tsrv.utils.custUUID(4);

  public visibleButtons: Array<N_oSimpleToolbar.I_Conf> = [];

  public hiddenButtons: Array<N_oSimpleToolbar.I_Conf> = [];

  created() {
    this.G_compID = Tsrv.utils.getGUID();
    /* 如果外部有传入组件信息 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox = new ts.T_compBox(this.G_compID); // 使用本地实例
    } else {
      this.G_compID = this.compBoxInfo.compID;
      this.GT_compBox = this.compBoxInfo.TcompBox;
    }
    this.GT_compBoxInfo = { compID: this.G_compID, TcompBox: this.GT_compBox };
    this.visibleButtons = [...this.list];
  }

  mounted() {
    /* 向父组件发送实例 */
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    this.$nextTick(() => {
      setTimeout(() => {
        this.calculateVisibleButtons();
      }, 1500);
    });
  }

  public calculateVisibleButtons() {
    const eleToolbar = this.$refs[this.refToolbar] as HTMLElement;
    const toolbarWidth = eleToolbar.offsetWidth; // 获取工具栏容器的宽度
    const buttons = [...this.list]; // 复制按钮数组，以免修改源数据
    let totalWidth = 0;
    const visibleButtons: Array<N_oSimpleToolbar.I_Conf> = [];

    for (let i = 0; i < buttons.length; i++) {
      const button = buttons[i];
      const buttonWidth = document.getElementById(button.key).offsetWidth;
      if (totalWidth + buttonWidth <= toolbarWidth) {
        totalWidth += buttonWidth;
        visibleButtons.push(button);
      } else {
        this.hiddenButtons = buttons.slice(i);
        break; // 超出容器宽度则停止添加按钮
      }
    }

    this.visibleButtons = visibleButtons;
  }

  // 重新计算 toolbar 可视区
  public recalculate() {
    this.visibleButtons = [...this.list];
    this.hiddenButtons = [];
    this.$nextTick(() => {
      this.calculateVisibleButtons();
    });
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
  }
  /**
   * @Author: wiz
   * @param {*} item
   * @param {*} event
   * @return {*}
   * @description: 点击事件
   */

  handleClickLink(item, event) {
    if (!item.disabled) {
      this.$emit('click', item, event);
    }
  }

  // 监听动态组件所有事件
  handleEvent(eventName, payload) {
    this.handleClickLink(eventName, payload);
  }
}
</script>
<style lang="scss" scoped>
.toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  padding: 8px;
  width: 100%;
  border: 1px solid #e9e9e9;
  // height: 42px;
  /* z-index: 3; */
  box-shadow: 0px 8px 12px 0px rgba(0, 52, 107, 0.04);
  /* position: absolute; */
  #more ::v-deep .ivu-select-dropdown,
  .transition-drop-enter,
  .transition-drop-enter-active {
    width: 70px;
  }
  .wy-icon-cust {
    font-family: 'wy-icon' !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .command:nth-of-type(1) {
    margin-left: 4px;
  }
  .command {
    box-sizing: border-box;
    // width: 27px;
    // height: 27px;

    margin: 0px 6px;
    border-radius: 2px;
    padding-left: 4px;
    display: inline-block;
    color: var(--graph-toolbar-font-color);
    border: 1px solid rgba(2, 2, 2, 0);
  }
  .command:hover:not(.disable) {
    cursor: pointer;
    color: var(--graph-toolbar-hover-fontColor);
    background-color: var(--graph-toolbar-hover-bg-color);
  }
  .disable {
    color: var(--graph-toolbar-disabled-font-color);
  }
  .separator {
    margin: 6px;
    border-left: 1px solid #e9e9e9;
  }
  .open {
    &::after {
      content: '\e82f';
      display: block;
      width: 5px;
      height: 5px;
      position: absolute;
      top: 0.5px;
      color: #f40;
    }
  }
  .item {
    display: flex;
    flex-direction: row;
  }
}
</style>
